<template>
    <!-- 个人中心 -->
    <div class="user-view">
        <!-- 标题 -->
        <div class="touxiang">
            <div class="title">
                个人中心
            </div>
            <div>
                <img src="https://imgs-qn.iliangcang.com/images/default/default180.png">
            </div>
        </div>
        <!-- 调用vant单元格 -->
        <van-cell title="我的订单" is-link icon="orders-o" @click="router.push('/index/order')"/>
        <van-cell title="地址管理" is-link  icon="guide-o" @click="router.push('/address')"/>
        <van-cell title="心愿单" is-link icon="like-o"/>
        <van-cell title="我的红包" is-link icon="pending-payment"  @click="showList = true"/>
        <van-cell title="联系客服" is-link icon="service-o"/>
        <van-cell title="政策服务" is-link icon="description-o"/>
        <van-cell title="退出登录" is-link @click="outLogin" icon="revoke"/>

          <!-- 优惠券列表 -->
          <van-popup
            v-model:show="showList"
            round
            position="bottom"
            style="height: 90%; padding-top: 4px;"
            >
            <van-coupon-list
                :coupons="coupons"
              
            />
            </van-popup>
    </div>
</template>
<script setup lang="ts">



    let router = useRouter();
    // 显示优惠价
    let showList = ref(false)

    // 优惠券
    const coupon = {
    available: 1,
    condition: '无门槛\n最多优惠88元',
    reason: '',
    value: 150,
    name: '不要998不要888只要88',
    startAt: 1489104000 + 31536000 *6,
    endAt: 1514592000 + 31536000 *7,
    valueDesc: '88',
    unitDesc: '元',
    };
    const coupons = ref([coupon]);
    


    //退出登录方法
    function outLogin(){
        localStorage.removeItem('username');
		localStorage.removeItem('token');

		location.reload();
    }
</script>
<style scoped lang="less">
    //上半部分
    .user-view{
        width: 100%;
        height: 100%;
        background: #EEE;
    }
    //头像部分
    .touxiang{
        width: 100%;
        height: 40%;
        margin-bottom: 20px;
        
        background: white;
        .title{
        text-align: center;
        font-size: 20px;
        background: white;
        margin-bottom: 50px;
    }
    
        div{
            width: 25%;
            margin: 0px auto;
            img{
            
            width: 100%;
            border-radius: 50%;
          }
        }
        
    }

  
</style>
